import { PropertyContext } from '../index'
import type { PropertyContextType } from '../type'
import React, { useContext } from 'react';

const PropertyDetails: React.FC = () => {
  const { detailVisible, currentSelectProperty, customsetData } = useContext(PropertyContext) as PropertyContextType

  /**
   * 点击遮罩直接关闭弹窗
   */
  const handleClickMask = () => {
    customsetData('detailVisible', false)
  }
  return (
    <>
      {
        detailVisible ? (
          <>
            <div onClick={handleClickMask} className="fixed z-[9999] top-0 left-0 w-full h-full bg-gray-900 bg-opacity-75 z-50"></div>
            <div className="fixed z-[99999] w-2/4 top-2/4 left-1/2 transform -translate-x-1/2 -translate-y-1/2 px-5 bg-white rounded-lg shadow-lg">
              <div className='py-4 font-bold text-base'>
                <span>PropertyDetail</span>
              </div>
              <ul className="list-none">
                <li className='my-4'>propertyName：{currentSelectProperty?.propertyName}</li>
                <li className='my-4'>address：{currentSelectProperty?.address.city + ' ' + currentSelectProperty?.address.street}</li>
                <li className='my-4'>zipCode：{currentSelectProperty?.address.zipCode}</li>
                <li className='my-4'>monthlyRent：{currentSelectProperty?.monthlyRent}</li>
                <li className='my-4'>numberOfUnits：{currentSelectProperty?.numberOfUnits}</li>
                <li className='my-4'>status：{currentSelectProperty?.status}</li>
                <li className='my-4'>propertyManagerName：{currentSelectProperty?.propertyManager.name}</li>
                <li className='my-4'>propertyManagerEmil：{currentSelectProperty?.propertyManager.contact}</li>
                <li className='my-4'>amenities：{currentSelectProperty?.propertyDetails.amenities}</li>
                <li className='my-4'>petPolicy：{currentSelectProperty?.propertyDetails.petPolicy}</li>
                <li className='my-4'>unitTypes：{currentSelectProperty?.propertyDetails.unitTypes}</li>
                <li className='my-4'>amenities：{currentSelectProperty?.propertyDetails.amenities}</li>
                <li className='my-4'>yearBuilt：{currentSelectProperty?.propertyDetails.yearBuilt}</li>
                <li className='my-4'>description：{currentSelectProperty?.propertyDetails.description}</li>
              </ul>
            </div>
          </>
        ) : ''
      }
    </>
  );
};

export default PropertyDetails;
